<template>
  <div class="promotion-manage">
    <!-- <el-row :span="24" :gutter="10">
      <el-col :span="5">
        <el-input placeholder="请输入" v-model="search.empName" @change="fetchData">
          <template slot="prepend">推广人</template>
        </el-input>
      </el-col>
      <el-col :span="5">
        <el-input placeholder="请输入" v-model="search.customerName" @change="fetchData()">
          <template slot="prepend">被推广人</template>
        </el-input>
      </el-col>
    </el-row>-->
    <el-form :inline="true" size="mini" style="margin-left: 10px" class="search-form">
      <el-form-item label="推广人">
        <el-input v-model="search.empName" @change="fetchData"></el-input>
      </el-form-item>
      <el-form-item label="被推广人">
        <el-input v-model="search.customerName" @change="fetchData"></el-input>
      </el-form-item>
    </el-form>
    <el-table :data="promotionList" size="mini" style="width: 100%" :height="getTableHeight(180)">
      <el-table-column fixed prop="popularizeName" label="推广人"></el-table-column>
      <el-table-column prop="popularizedName" label="被推广人"></el-table-column>
      <el-table-column prop="date" label="推广时间"></el-table-column>
    </el-table>
    <div class="paging-block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import {
  PRICE_TYPE,
  PRODUCT_SALE_STATUS,
  SUCCESS_CODE,
  FETCH_PROMOTION_LIST_FAILED
} from '@/config/config';

export default {
  name: 'product_manage',
  data: function() {
    return {
      search: {},
      promotionList: [],
      pagination: {
        total: 0, // 数据总条数
        limit: 10, // 每页数据量
        pageNum: 1 // 当前页
      }
    }
  },
  methods: {
    ...mapActions('promotionManage', ['fetchPromotionList']),
    fetchData() {
      this.fetchPromotionList({
        limit: this.pagination.limit,
        pageNum: this.pagination.pageNum,
        status: 'ENABLE'
      }).then(result => {
        if (result.status === SUCCESS_CODE) {
          this.promotionList = result.data.results
          this.pagination.total = result.data.total
        } else {
          this.$swal(FETCH_PROMOTION_LIST_FAILED, '', 'error')
        }
      })
    },
    handleCurrentChange(currentPage) {
      console.log(this.pagination)
      this.pagination.pageNum = currentPage
      this.fetchData()
    },
    handleSizeChange(size) {
      this.pagination.limit = size
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

<style scoped>
</style>
